<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="box">
    <div>todolist</div>
<!--    <input type="text" @input="handleInput">-->
    <input type="text" v-model="mytext"> <!--双向绑定指令 -->
    <button @click="handleAdd">add</button>
    <ul>
        <li v-for="item,index in list">
            {{item}}--{{index}}
            <button @click="handleDel(index)">del</button>
        </li>
    </ul>
    <div v-show="list.length===0">暂无代办事项</div>
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                mytext: "",
                list:[]
            }
        },
        methods:{
            handleAdd(){
                this.list.push(this.mytext)
                this.mytext = ""
            },
            handleDel(index){
                this.list.splice(index,1)
            }
            // handleInput(evt){
            //     this.mytext = evt.target.value
            // }
        }
    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>